import { Button, Result, Divider } from 'antd';
import React,{useEffect} from 'react';
import { connect, Dispatch, history } from 'umi';
import { StateType } from '../../model';
import styles from './index.less';
import results1 from '../../../../../public/results1.png';
interface Step3Props {
  data?: StateType['results'];
  dispatch?: Dispatch;
}

const Step3: React.FC<Step3Props> = (props) => {
  const { data, dispatch } = props;
  if (!data) {
    return null;
  }
  const onFinish = () => {
    if (dispatch) {
      dispatch({
        type: 'initiateSubscribe/saveCurrentStep',
        payload: 'info',
      });
    }
  };
  const result = () => {
    history.push('/visitorList');
  }
  useEffect(()=>{
  if(dispatch&&data.success){
      dispatch({
    type: 'initiateSubscribe/empty',
    payload: {},
  });
  }

},[])
  const extra = (
    <>
      <div>
        <div style={{ width: '18em', margin: '0 auto' }}>
          <img style={{ width: '100%' }} src={results1}></img>
        </div>
        <div style={{marginTop:'4em'}}>
          <Button type="primary" onClick={onFinish}>
            返回
      </Button>
          <Divider type="vertical" />
          {data.success ?
            (<Button onClick={() => { result() }}>查看预约结果</Button>) : ('')
          }
        </div>
      </div>
    </>
  );
  return (
    <Result
      status={data.success ? 'success' : 'warning'}
      // title={data.success ? '稍后请留意一下，访客列表的预约结果！' : '请核查一下访客信息，稍后重试！'}
      subTitle={data.success ? '发起预约成功' : `${data.message}`}
      extra={extra}
      className={styles.result}
    >
    </Result>
  );
};

export default connect(({ initiateSubscribe }: { initiateSubscribe: StateType }) => ({
  data: initiateSubscribe.results,
}))(Step3);
